import { designSystem } from './design-system';

// 主题类型定义
export type ThemeMode = 'light' | 'dark' | 'auto';

export interface Theme {
  mode: ThemeMode;
  colors: typeof designSystem.colors;
  typography: typeof designSystem.typography;
  spacing: typeof designSystem.spacing;
  borderRadius: typeof designSystem.borderRadius;
  boxShadow: typeof designSystem.boxShadow;
}

// 浅色主题
export const lightTheme: Theme = {
  mode: 'light',
  colors: {
    ...designSystem.colors,
    // 覆盖特定颜色用于浅色主题
    background: {
      primary: '#ffffff',
      secondary: '#f8fafc',
      muted: '#f1f5f9',
      overlay: 'rgba(15, 23, 42, 0.8)',
    },
    text: {
      primary: '#0f172a',
      secondary: '#475569',
      muted: '#94a3b8',
      inverse: '#ffffff',
    },
    border: {
      primary: '#e2e8f0',
      secondary: '#cbd5e1',
      focus: '#2563eb',
    },
  },
  typography: designSystem.typography,
  spacing: designSystem.spacing,
  borderRadius: designSystem.borderRadius,
  boxShadow: designSystem.boxShadow,
};

// 深色主题
export const darkTheme: Theme = {
  mode: 'dark',
  colors: {
    ...designSystem.colors,
    // 覆盖特定颜色用于深色主题
    background: {
      primary: '#0f172a',
      secondary: '#1e293b',
      muted: '#334155',
      overlay: 'rgba(248, 250, 252, 0.8)',
    },
    text: {
      primary: '#f8fafc',
      secondary: '#cbd5e1',
      muted: '#64748b',
      inverse: '#0f172a',
    },
    border: {
      primary: '#334155',
      secondary: '#475569',
      focus: '#3b82f6',
    },
  },
  typography: designSystem.typography,
  spacing: designSystem.spacing,
  borderRadius: designSystem.borderRadius,
  boxShadow: {
    ...designSystem.boxShadow,
    // 深色主题下的阴影调整
    sm: '0 1px 2px rgba(0, 0, 0, 0.3)',
    md: '0 4px 6px rgba(0, 0, 0, 0.3)',
    lg: '0 10px 15px rgba(0, 0, 0, 0.3)',
    xl: '0 20px 25px rgba(0, 0, 0, 0.3)',
  },
};

// 主题工具函数
export const getTheme = (mode: ThemeMode): Theme => {
  switch (mode) {
    case 'light':
      return lightTheme;
    case 'dark': {
      return darkTheme;
    }
    case 'auto': {
      // 根据系统偏好自动选择
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      return prefersDark ? darkTheme : lightTheme;
    }
    default:
      return lightTheme;
  }
};

// 应用主题到DOM
export const applyTheme = (theme: Theme) => {
  const root = document.documentElement;
  
  // 设置CSS变量
  root.style.setProperty('--color-bg-primary', theme.colors.background.primary);
  root.style.setProperty('--color-bg-secondary', theme.colors.background.secondary);
  root.style.setProperty('--color-bg-muted', theme.colors.background.muted);
  root.style.setProperty('--color-bg-overlay', theme.colors.background.overlay);
  
  root.style.setProperty('--color-text-primary', theme.colors.text.primary);
  root.style.setProperty('--color-text-secondary', theme.colors.text.secondary);
  root.style.setProperty('--color-text-muted', theme.colors.text.muted);
  root.style.setProperty('--color-text-inverse', theme.colors.text.inverse);
  
  root.style.setProperty('--color-border-primary', theme.colors.border.primary);
  root.style.setProperty('--color-border-secondary', theme.colors.border.secondary);
  root.style.setProperty('--color-border-focus', theme.colors.border.focus);
  
  // 设置主题模式类名
  root.classList.remove('light', 'dark');
  root.classList.add(theme.mode === 'auto' ? 'auto' : theme.mode);
};

// 主题工具函数（仅导出类型和工具函数）
export interface ThemeContextType {
  theme: Theme;
  themeMode: ThemeMode;
  setTheme: (mode: ThemeMode) => void;
  toggleTheme: () => void;
  isDark: boolean;
  isLight: boolean;
}